<template>
	<view class="header">
		<view class="search">
			搜索框
		</view>
  <view class="container">
    <view class="cart-list">
      <block v-for="(item, index) in cartList" :key="index">
        <view class="cart-item">
          <image :src="item.image" class="cart-image"></image>
          <view class="cart-item-info">
            <text class="cart-name">{{ item.name }}</text>
            <view class="cart-price">¥{{ item.price }}</view>
            <view class="cart-quantity">
              <button @click="decreaseQuantity(index)" :disabled="item.quantity <= 1">-</button>
              <text>{{ item.quantity }}</text>
              <button @click="increaseQuantity(index)">+</button>
            </view>
          </view>
        </view>
        <view class="cart-item-line"></view>
      </block>
    </view>
    <view class="cart-footer">
      <view class="total-price">
        <text>总价: ¥{{ totalPrice }}</text>
      </view>
      <button>去结算</button>
    </view>
  </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cartList: [
        { id: 1, name: '椅子', image: '/static/images/yizi.jpg', price: 100, quantity: 1 },
        { id: 2, name: '床', image: '/static/images/chuang.jpg', price: 200, quantity: 1},
        // 更多商品...
      ]
    };
  },
  computed: {
    totalPrice() {
      return this.cartList.reduce((total, item) => total + item.price * item.quantity, 0);
    }
  },
  methods: {
    increaseQuantity(index) {
      this.cartList[index].quantity++;
    },
    decreaseQuantity(index) {
      if (this.cartList[index].quantity > 1) {
        this.cartList[index].quantity--;
      }
    }
    // goToCheckout() {
    //   // 跳转到结算页面
    //   uni.navigateTo({
    //     url: '/pages/checkout/checkout'
    //   });
    // }
  }
};
</script>

<style lang="scss" scoped>
	.header {
		height: 60rpx;
		border-bottom: 2px solid #eee;
		padding: 20rpx;
	
		.search {
			height: 60rpx;
			background-color: #bbb;
			border-radius: 10rpx;
			line-height: 60rpx;
			text-align: center;
		}
	}
.container {
  padding: 20px;
}

.cart-list {
  margin-bottom: 20px;
}
.cart-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}
.cart-image {
  width: 80px;
  height: 80px;
  margin-right: 15px;
}
.cart-item-info {
  flex: 1;
}
.cart-name {
  font-size: 18px;
  margin-bottom: 5px;
}
.cart-price {
  font-size: 16px;
  color: #f56c6c;
}
.cart-quantity {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.cart-quantity button {
  width: 30px;
  height: 30px;
  line-height: 10px;
  text-align: center;
  border: 1px solid #ddd;
  margin: 0 5px;
  padding: 10px;
}
.cart-item-line {
  height: 1px;
  background-color: #ddd;
  margin: 10px 0;
}
.cart-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.total-price {
  font-size: 18px;
  margin-bottom: 10px;
}
button {
  padding: 10px 20px;
  background-color: #1aad19;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>